<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="form-box">
            <div class="form-title">广告信息</div>
            <el-form label-width="80px" class="form" label-position='right'>
                <div class="form-item" v-loading='loading'>
                    <div class="form-item-title">
                        <!-- <span class="note-css"></span> -->
                        <span class="title-level">基本信息</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="广告类型" >
                                    <span>{{advData.sType=='0'?'积分商城顶部广告位':advData.sType=='1'?'e学云教育平台首页广告位':advData.sType=='2'?'APP全屏广告位':advData.sType=='3'?'周边教育广告':advData.sType=='4'?'课程学习广告':''}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="广告名称" >
                                    <span>{{advData.sName}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="备注" >
                                    <span>{{advData.sDesc}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item v-if="advData.sStatus=='2' || advData.sStatus=='3'" label="上线时间">
                                    <span>{{advData.sOnlineTime}}</span>
                                </el-form-item>
                                <el-form-item v-if="advData.sStatus=='0' || advData.sStatus=='1'" label="创建时间">
                                    <span>{{advData.sCreateTime}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="可见级别" >
                                    <span>{{advData.sLevel=='0'?'全国':advData.sLevel=='1'?'省级':advData.sLevel=='2'?'市级':advData.sLevel=='3'?'区级':''}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="advData.sStatus=='0' || advData.sStatus=='1'">
                                <el-form-item label="点击次数">
                                    <span>{{advData.sClickNum}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21" v-if="advData.sType=='2'">
                            <el-col :span="12">
                                <el-form-item label="指定位置" >
                                    <span>{{advData.sAppType=='0'?'教学app':advData.sAppType=='1'?'家庭app':advData.sAppType=='2'?'教学和家庭app':''}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <!-- <span class="note-css"></span> -->
                        <span class="title-level">广告图片</span>
                    </div>
                    <div class="form-content item">
                        <el-row :gutter="21">
                            <el-col :span="24">
                                <el-form-item label-width="0">
                                    <div class="img-box">
                                        <img :src="imgSrc"/>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item" v-if="switchTitle!=''">
                    <div class="form-item-title">
                        <!-- <span class="note-css"></span> -->
                        <span class="title-level">{{switchTitle}}</span>
                    </div>
                    <div class="form-content content-list">
                        <el-row :gutter="21">
                            <el-col :span="24">
                                <el-form-item label="广告链接" v-if="this.advData.sShowType == '0'">
                                    <a class="link-src" :href="advData.sLink" target="_blank">{{advData.sLink}}</a>
                                    <!-- <span>{{advData.sLink}}</span> -->
                                </el-form-item>
                                <el-form-item label="" v-if="this.advData.sShowType == '1'" label-width="0">
                                    <div v-html="advData.sHtml" class='read-recod panel-body'></div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item" v-if="advData.sStatus=='0' || advData.sStatus=='1'">
                    <div class="form-item-title">
                        <!-- <span class="note-css"></span> -->
                        <span class="title-level">发布区域信息</span>
                    </div>
                    <div class="form-content item">
                        <el-row :gutter="21">
                            <el-col :span="11">
                                <el-form-item label="省份" label-width="50px">
                                    <province v-model="advData.fProvinceId" :disabled='true'></province>
                                    <!-- <span>{{advData.provinceName}}</span> -->
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="11">
                                <el-form-item label="城市" label-width="50px">
                                    <city v-model="advData.fCityId" :province="advData.fProvinceId" :disabled='true'></city>
                                    <!-- <span>{{advData.cityName}}</span> -->
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="11">
                                <el-form-item label="区/县" label-width="50px">
                                    <region v-model="advData.fAreaId" :city="advData.fCityId" :disabled='true'></region>
                                    <!-- <span>{{advData.areaName}}</span> -->
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <!-- <span class="note-css"></span> -->
                        <span class="title-level">审核历史记录</span>
                    </div>
                    <div class="form-content">
                        <el-table style="width: 100%" :data="tableData" v-loading='tableLoading'>
                            <el-table-column label="审核人">
                                <template scope="scope">
                                    <span>{{scope.row.applyUserName  | isNull}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="审核时间">
                                <template scope="scope">
                                    <span>{{scope.row.sChecktime  | isNull}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="审核状态">
                                <template scope="scope">
                                    <span>{{scope.row.sStatus=='0'?'通过并上线':scope.row.sStatus=='1'?'驳回':'--'}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="审核描述">
                                <template scope="scope">
                                    <span>{{scope.row.sDescription  | isNull}}</span>
                                </template>
                            </el-table-column>
                        </el-table>  
                    </div>
                </div>
                <div class="form-item">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item>
                                <div class="footer">
                                    <el-button @click="goBack">返回</el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    import Levelbar from '../../../layout/Levelbar';
    import province from 'components/AdvArea/province';
    import city from 'components/AdvArea/city';
    import region from 'components/AdvArea/region';
    import { getAdvertInfo, listAdvAuditInfo } from 'api/advMangement';

    export default {
        name: 'advDisplay',
        components: { Levelbar, province, city, region },
        data() {
            return {
                imgSrc: '',
                advData: {
                    sType: '',
                    sName: '',
                    sDesc: '',
                    sStatus: '',
                    sOnlineTime: '',
                    sCreateTime: '',
                    sLevel: '',
                    sClickNum: '',
                    imgSrc: '',
                    sShowType: '',
                    sLink: '',
                    sHtml: '',
                    fAreaId: '',
                    fCityId: '',
                    fProvinceId: ''
                },
                loading: false,
                tableLoading: false,
                switchTitle: '',
                tableData: []
            }
        },
        created() {
            this.getAdvertInfoFu();
            this.listAdvAuditInfoFu();
        },
        methods: {
            getAdvertInfoFu() {
                let pId = this.$route.params.id;
                this.loading = true;
                getAdvertInfo(pId).then(res => {
                    this.loading = false;
                    if (res.data.status == 200) {
                        this.advData = res.data.content;
                        // "sShowType": "0",  广告展现形式 0：链接  1：html
                        if (this.advData.sShowType == '0') {
                            this.switchTitle = '链接信息';
                            // let httpurl = '';
                            let httpurl = res.data.content.sLink;
                            if (!res.data.content.sLink) {
                                this.switchTitle = '';
                            }
                            // if (ht) {
                            //     if (!/(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g.test(ht)) {
                            //         httpurl='http://'+ht;
                            //     } else {
                            //         httpurl=ht;
                            //     }
                            // }
                            this.advData.sLink = httpurl;
                        } else if (this.advData.sShowType == '1') {
                            this.switchTitle = '自定义内容';
                            if (!res.data.content.sHtml) {
                                this.switchTitle = '';
                            }
                        }

                        if (this.advData.sType == '2') {

                            if (this.advData.sIosOne) {
                                this.imgSrc = this.advData.sIosOne;
                            } else if (this.advData.sAndroid) {
                                this.imgSrc = this.advData.sAndroid;
                            } else if (this.advData.sIosTwo) {
                                this.imgSrc = this.advData.sIosTwo;
                            } else if (this.advData.sIosThree) {
                                this.imgSrc = this.advData.sIosThree;
                            }
                            
                        } else {
                            this.imgSrc = this.advData.sPic;
                        }
                    } else {
                        this.$message.error(res.data.errorMsg);
                    }
                    
                }).catch(() => {
                    this.loading = false;
                });
            },
            listAdvAuditInfoFu() {
                let pId = this.$route.params.id;
                this.tableLoading = true;
                listAdvAuditInfo(pId).then(res => {
                    this.tableLoading = false;
                    if (res.data.status == 200) {
                        this.tableData = res.data.content;
                    } else {
                        this.$message.error(res.data.errorMsg);
                    }
                    
                }).catch(() => {
                    this.tableLoading = false;
                });
            },
            goBack() {
                this.$router.go(-1);
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../../../../static/tinymce/skins/lightgray/content.min.css";
    .app-container {
        position: relative;
        padding: 20px 20px 10px;
        $bgcolor: #fff;

        @mixin showTitle() {
            background: $bgcolor;
            box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        }
        .form-box {
            padding: 0 50px;
            @include showTitle();
            .form-title {
                padding-top:8px;
                text-align: center;
                font-size: 18px;
                color: #333;
                line-height: 72px;
                font-weight: bold;
                font-family: Microsoft YaHei;
                border-bottom: 1px solid #ddd;
            }
            .form {
                .form-item {
                    padding-bottom: 40px;
                    .form-item-title {
                        margin: 40px 0;
                        font-size: 14px;
                        color: #333;
                        line-height: 14px;
                        border-left: 4px solid #ff5e2c;
                        text-indent: 16px;
                    
                        .note-css {
                            vertical-align: middle;
                            display: inline-block;
                            width: 4px;
                            height: 14px;
                            margin-right: 26px;
                            border-left: 3px solid #ff5e2c;
                            // background: #30B08F url('../../../images/student/noteLavel.png') no-repeat 0 0;
                        }
                    }
                    .form-content {
                        margin: 0 8px;
                    }
                    .item {
                        margin-bottom: 20px;
                    }
                   
                    .back {
                        margin-top: 20px;
                    }
                    .footer {
                        text-align: center;
                        margin-top: 40px;
                    }
                    .content-list {
                        margin-top: 20px;
                        max-width: 1000px;
                        overflow: hidden;
                        word-wrap: break-word;
                        margin-left: 26px;
                    }
                    .img-box {
                        margin-bottom: 10px;
                        overflow: hidden;
                        max-width: 1000px;
                        height: auto;
                        img {
                            max-width: 1000px;
                            height: auto;
                        }
                    }
                }
            }
        }
    }
</style>